 
<template>
  <div class="box" style="height:680px;position:fixed;width:80%;">
    <el-row>
      <el-col :span="16" style="height:680px; " class="contentbox">
        <div class="grid-content bg-purple-light">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="first">
                <div class="content_child" v-for="(i,$index) in datalist" :key="$index">
                  <span>
                    <img v-if="i.create_user_info.img" :src="i.create_user_info.img" alt />
                    <i v-else class="covers">{{i.user_id-1}}</i>
                  </span>
                  <p>
                    {{i.create_user_info.realname}}
                    <i>{{i.action_content}}</i>
                    <a href="javascript:;">
                      <b class="el-icon-s-check"></b>
                      {{i.type_name}}
                    </a>
                  </p>

                  <p style="font-size:12px;text-indent:60px;">{{i.create_time|dateFilter}}</p>
                  <div class="titles">{{i.title}}</div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="日志" name="second">
                <cards></cards>
              </el-tab-pane>
              <el-tab-pane label="审批" name="third"></el-tab-pane>
              <el-tab-pane label="任务" name="office">任务</el-tab-pane>
              <el-tab-pane label="公告" name="tells">公告</el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple" style="margin-left:30px;">
          <div class="task">
            <div class="title">任务</div>
            <div class="content-box">
              <div class="no-task">
                <img
                  src=""
                  alt
                />
                <p>
                  目前没有任务，快去
                  <router-link to="/card_task" style="color: royalblue;">添加</router-link>吧！
                </p>
              </div>
            </div>
          </div>
          <div class="rlsty">
            <div class="schedule-calendar">
              <div class="title">
                <span>日程</span>
                <div class="rt">
                  <span>+</span>
                  <span>创建</span>
                </div>
              </div>
              <div style="padding-top:5px;">
                <!-- <Calendar></Calendar> -->
                <Rl></Rl>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from "vue";
import Rl from "../RL/Rl";
import vueQuickCalendar from "vue-quick-calendar";
import Calendar from "vue-calendar-component";
import moment from "moment";
import http from "@/util/http.js";
import cards from "../Cards/cards_rz";
Vue.filter("dateFilter", (date) => {
  return moment(date * 1000).format("YYYY-MM-DD");
});
export default {
  name: "",
  data() {
    return {
      activeName: "first",
      datalist: [],
    };
  },
  methods: {
    handleClick(tab, event) {},
    // imgError(i) {
    //   i.create_user_info.img = require("../imger/notfound.jpg");
    // },
  },
  mounted() {
    http
      .post("oa/index/index", {
        page: 5,
        limit: 15,
      })
      .then((res) => {
        console.log(res.data.data.list);
        this.datalist = res.data.data.list;
      });
  },
  components: { Calendar, vueQuickCalendar, Rl, cards },
};
</script>

<style scoped lang='scss'>
* {
  text-decoration: none;
}
.task {
  background: #fff;
  height: 300px;
  margin-bottom: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  .title {
    height: 44px;
    line-height: 44px;
    margin: 0 20px;
    border-bottom: 1px solid #e6e6e6;
  }
  .content-box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    position: relative;
    margin-bottom: 10px;
    .no-task {
      text-align: center;
      padding: 20px 0;
    }
  }
}
.rlsty {
  background: #fff;
  min-height: 400px;
  padding: 0 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  .schedule-calendar {
    padding-bottom: 20px;
    .title {
      height: 44px;
      line-height: 44px;
      border-bottom: 1px solid #e6e6e6;
      .rt {
        display: inline;
        color: #3e84e9;
        margin-right: 0;
        float: right;
        cursor: pointer;
      }
    }
  }
}

.box {
  overflow: hidden;
  .contentbox {
    border: 1px solid #3333;
    box-shadow: 0px 0px 8px #e6dada;
    border-radius: 10px;
    height: 800px;
  }
}

.el-tab-pane {
  width: 50%;
  height: 700px;
  padding: 0 15px;
  overflow-y: scroll;
  top: 150px;
  left: 240px;
  position: fixed;
}

.el-tabs {
  line-height: 20px;
  padding: 0 10px;
}
.content_child {
  // 文字内容
  width: 100%;
  height: 150px;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  padding: 8px 0;
  margin: 2px 0;

  p {
    text-align: left;
    font-size: 15px;
    i {
      display: inline-block;
      font-style: normal;
      font-size: 13px;
      color: #666666;
    }
    a {
      float: right;
      color: #000;
      b {
        color: royalblue;
      }
    }
  }
  span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    float: left;

    .covers {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20px;
      float: left;
      text-align: center;
      line-height: 35px;
      background: royalblue;
      color: #fff;
      font-style: normal;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.titles {
  height: 15px;
  text-align: left;
  line-height: 15px;
  margin: 20px 0 0;
  color: #3e84e9;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #a2c3f0;
  background-color: #f4f7fd;
  padding: 10px 20px;
  border-radius: 2px;
}
</style>
